<!DOCTYPE html>
<!--
Author: Qi He
Data: 2014/9/29
Description: This is a sample of UI for demonstrating the project's work
-->

<html>
	<head>
		<meta charset="UTF-8">
		<title>sample of UI</title>
		<script src=" http://maps.googleapis.com/maps/api/js?key=AIzaSyCDX-uKCI2N7SkdZBvcvsDJINN6s7ApsQ0&sensor=false&language=en" ></script> 
        <script>
            function mapLoader(){
                var mapParameters ={
                	center:new google.maps.LatLng(-34.9252785,138.6064855),
                	zoom:14,
                	mapTypeId:google.maps.MapTypeId.ROADMAP
                };
            	var map=new google.maps.Map(document.getElementById("googleMap"),mapParameters);
            }
        	google.maps.event.addDomListener(window, 'load', mapLoader);
        </script>
        <style type="text/css">
        	body {background:#f3f9f1}
        	div#googleMap {
        					width:800px;
        					height:648px;
        					display:inline-block;
        					box-shadow: 0 0 10px #000;}
        	div#controlPanel {
        					width:526px;
        					height:648px;
        					display:inline-block;
        					vertical-align: top;
        					box-shadow: 0 0 10px #000;}
        	div#header{
        				text-align:center;
        				padding-top: 10px;
        				padding-bottom: 10px;
        				font-family: Arial, serif; 
        				font-size: 20px;
        				color: rgb(136, 169, 255);}
			div#user{
					width:526px;
					height:40px;
					line-height:40px;
					text-align:center;
					font-family: Arial, serif;
					color: rgb(136, 169, 255);
					background:white;
					}
			button.css4button {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 16px;
					color: #88aaff;
					padding: 6px 30px;
					background: -moz-linear-gradient(
						top,
						#ffffff 0%,
						#ffffff);
					background: -webkit-gradient(
						linear, left top, left bottom,
						from(#ffffff),
						to(#ffffff));
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
					border: 1px solid #ffffff;
					-moz-box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
					-webkit-box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
					box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
				}
				button.css3button {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 16px;
					color: #88aaff;
					padding: 6px 30px;
					background: -moz-linear-gradient(
						top,
						#f3f9f1 0%,
						#f3f9f1);
					background: -webkit-gradient(
						linear, left top, left bottom,
						from(#f3f9f1),
						to(#f3f9f1));
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
					border: 1px solid #ffffff;
					-moz-box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
					-webkit-box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
					box-shadow:
						0px 1px 3px rgba(255,255,255,0.5),
						inset 0px 0px 1px rgba(255,255,255,0.5);
				}
				div#visualization{
					width:526px;
					height:85px;
					line-height:40px;
					text-align:center;
					font-family: Arial, serif;
					color: rgb(136, 169, 255);
				}
				div#baseline{
					width:526px;
					height:90px;
					line-height:40px;
					text-align:center;
					font-family: Arial, serif;
					color: rgb(136, 169, 255);
					background:white;
				}
				div#linearModel{
					width:526px;
					height:205px;
					line-height:40px;
					text-align:left;
					padding-left:1em;
					font-family: Arial, serif;
					color: rgb(136, 169, 255);
				}
				div#result{
					width:510px;
					height:173px;
					padding-top: 10px;
					line-height:25px;
					text-align:left;
					padding-left:1em;
					font-family: Arial, serif;
					color: rgb(136, 169, 255);
					background:white;
				}
        </style>
        
	</head>
	
	
	
	<body>
		<div id="drawBoard">
			<div id="googleMap"></div>
			<div id="controlPanel">
				<div id="header">POI Recommendation Stimulation</div>
				
				<div id="user">
					Selected User ID:
					<input type="text" name="user"/>
					<button type="button" name="user_retrieve" value="user_retrieve" class="css3button">Retrieve</button>
				</div>
				
				<div id="visualization">
					Visualization of User's Check-in Data:
					<br>
					<input type="checkbox" name="Trajectory" />Trajectory
					&emsp;
					<input type="checkbox" name="Trajectory" />Clusters
					&emsp;
					<input type="checkbox" name="Trajectory" />HeatMap
					&emsp;
					<button type="button" name="v_default" value="v_default" class="css4button">Default</button>
				</div>
				
				<div id="baseline">
					Algorithm of Baseline
					<br>
					<button type="button" name="User-Based CF" value="UB" class="css3button">User-Based CF</button>
					<button type="button" name="RWWR Method" value="RW" class="css3button">RWWR Method</button>
					<button type="button" name="NMF Method" value="NMF" class="css3button">NMF Method</button>
				</div>
				
				<div id="linearModel">
					Algorithm of Linear Model
					<br>
					Friendship-aware model: R_t;&emsp;&emsp;&emsp;
					Preference-aware model: R_p;
					<br>
					Geographical-aware model: R_g;&emsp;&emsp;
					Linear model: R_i;
					<br>
					Top -
					<select id="topN">
					  <option value ="10">10</option>
					  <option value ="15">15</option>
					  <option value ="20">20</option>
					  <option value ="25">25</option>
					</select> as Recommendations.&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					<button type="button" name="Process" value="Process" class="css4button">Process</button>
					<br>
					<select id="A">
					  <option value ="0.0">0.0</option>
					  <option value ="0.1">0.1</option>
					  <option value ="0.2">0.2</option>
					  <option value ="0.4">0.4</option>
					  <option value ="0.5">0.5</option>
					  <option value ="0.6">0.6</option>
					  <option value ="0.7">0.7</option>
					  <option value ="0.8">0.8</option>
					  <option value ="0.9">0.9</option>
					</select>
					* R_t + 
					<select id="B">
					  <option value ="0.0">0.0</option>
					  <option value ="0.1">0.1</option>
					  <option value ="0.2">0.2</option>
					  <option value ="0.4">0.4</option>
					  <option value ="0.5">0.5</option>
					  <option value ="0.6">0.6</option>
					  <option value ="0.7">0.7</option>
					  <option value ="0.8">0.8</option>
					  <option value ="0.9">0.9</option>
					</select>
					* R_p + (1-Alpha-Beta) * R_g = R_i
				</div>
				<div id="result">
					The results of selected algorithm:
					<br>
					<table>
						<tr>
							<th width="200">Method</th>
							<th width="100">Precision</th>
							<th width="100">Recall</th>
						</tr>
						<tr>
							<td width="200">User-Based</td>
							<td width="100">NULL</td>
							<td width="100">NULL</td>
						</tr>
						<tr>
							<td width="200">RWWR</td>
							<td width="100">NULL</td>
							<td width="100">NULL</td>
						</tr>
						<tr>
							<td width="200">NMF</td>
							<td width="100">NULL</td>
							<td width="100">NULL</td>
						</tr>
						<tr>
							<td width="200">Linear Model</td>
							<td width="100">NULL</td>
							<td width="100">NULL</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>